<template>
  <div class="tags2">
    <div class="topbar">
      <p>新RFIF</p>
      <el-input v-model="newRFIF" key="tags1"></el-input>
      <p>原RFIF</p>
      <el-input v-model="oldRFIF" key="tags2"></el-input>
      <p>客户编码</p>
      <el-input :disabled="!checkCustomerTag" v-model="customerNo" key="tags3" style="margin-right:10px;"></el-input>
      <el-select :disabled="!checkCustomerTag" v-model="customerInfo">
        <el-option
          v-for="item in customerList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-checkbox class="sle" v-model="checkCustomerTag">客户补标</el-checkbox>
      <el-checkbox class="sle" v-model="versionRoom">版房专用</el-checkbox>

      <p>洗标类型</p>
      <el-input v-model="washingType" key="tags4" disabled></el-input>

      <p>洗涤图</p>
      <div class="washImg">
        <input class="input_1" type="text" v-model="WashingFigure_1" disabled>
        <input class="input_1" type="text" v-model="WashingFigure_2" disabled>
        <input class="input_1" type="text" v-model="WashingFigure_3" disabled>
        <input class="input_1" type="text" v-model="WashingFigure_4" disabled>
        <input class="input_1" type="text" v-model="WashingFigure_5" disabled>
        <input class="input_1" type="text" v-model="WashingFigure_6" disabled>
      </div>
    </div>

    <div class="operation">
      <el-button :disabled="tag" :type="!tag?'primary':''" icon="el-icon-printer" @click="linePrint">列印吊牌</el-button>
      <el-button :disabled="!tag" :type="tag?'primary':''" icon="el-icon-printer" @click="washCareLabel">列印洗标</el-button>
      <el-button icon="el-icon-refresh">同货号换标</el-button>
      <el-button icon="el-icon-edit-outline">改进退ID</el-button>
      <div class="annotation">
        <div>
          <i class="el-icon-question"></i>
          说明：<p>F2吊牌设定  F3洗涤图标设定</p>
        </div>
        <div>
          <i class="el-icon-question"></i>
          <span>打印张数：{{amount}}</span>
        </div>
      </div>
      
    </div>

    <vxe-table
      border
      ref="xTable1"
      :data="tagsData"
      highlight-current-row
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
      :cell-style="{padding:0,height:'36px'}"
      @edit-actived="editActivedEvent"
      @edit-closed="editClosedEvent"
      @cell-click="cellClickEvent"
      height="78%">
      <vxe-table-column field="kindsNumber" title="货号"></vxe-table-column>
      <vxe-table-column field="colorName" title="颜色"></vxe-table-column>
      <vxe-table-column field="sellingPrice" title="吊牌价"></vxe-table-column>
      <vxe-table-column field="sellingPriceOne" title="正价" show-overflow></vxe-table-column>
      <vxe-table-column field="sellingPriceTwo" title="售价2" show-overflow></vxe-table-column>
      <vxe-table-column field="size" title="尺码编码" show-overflow></vxe-table-column>
      <vxe-table-column field="number" title="张数" show-overflow :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
      <vxe-table-column field="finishNumber" title="已打张数" show-overflow></vxe-table-column>
      <vxe-table-column field="mnemonicCode" title="助记码" show-overflow></vxe-table-column>
      <vxe-table-column field="sellingPriceThree" title="售价3" show-overflow></vxe-table-column>
      <vxe-table-column field="sellingPriceFour" title="售价4" show-overflow></vxe-table-column>
      <vxe-table-column field="vipPrice" title="VIP价" show-overflow></vxe-table-column>
    </vxe-table>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
      </div>
    </foot-view>

    <set-para :style="{display: showParameter}" @closeParameter="closeParameter"></set-para>
    <icon-doc :style="{display: showIconDoc}" @closeIconDoc="closeIconDoc"></icon-doc>

    <div id="p" v-show=false></div>
  </div>
</template>

<script>
const resources = require('../../../config/printCSS4')

import footView from '../../../components/FootView'
import setPara from './childComps/setPara'
import iconDoc from './childComps/iconDoc'
import { barcodeWashPrint, washPrintLinePrint, removeRedis } from '../../../network/tags'
import { getArtNo, getKindsNumberIngredient } from '../../../network/artNo'
import { getWash } from '../../../network/wash'

export default {
  name: 'tags2',
  // 同货号换标是厂进厂退客进客退的全都原RFIF改为新RFIF
  // 改进退ID是只改客进客退的原RFIF改为新RFIF
  created(){
    this.tag = this.$route.query.fid == 1 ? true : false
    let obj = {
      label: this.$route.query.label,
      name: this.$route.query.name
    }
    this.$store.commit('addNav',obj)
    this.$root.Bus.$on('send',val => {
      this.tagsData = []
      this.sizeNumberType = val[0].sizeNumberType
      // console.log(val[0].sizeNumberType)
      val.forEach(e => {
        getKindsNumberIngredient({typeNumber:e.kindsNumber.styleNumber}).then(res => {
          console.log(res)
          e.kindsNumber.ingredient = res.data.data[0]
          this.tagsData.push(e.kindsNumber)
        })
      })
      // console.log(this.tagsData)
    })
    getWash().then(res => {
      console.log(res)
      this.iconList = res.data.data
    })
  },
  data(){
    return {
      sizeNumberType:'',
      jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],

      showParameter: 'none',
      showIconDoc: 'none',
      newRFIF: '',
      oldRFIF: '',
      customerNo: '',
      customerInfo: '',
      customerList: '',
      washingType: '',
      WashingFigure_1: '',
      WashingFigure_2: '',
      WashingFigure_3: '',
      WashingFigure_4: '',
      WashingFigure_5: '',
      WashingFigure_6: '',
      checkCustomerTag: false,
      versionRoom: false,
      iconList: [],
      ingredientList: ['ingredientOne','ingredientTwo','ingredientThree','ingredientFour','ingredientFive','ingredientSix'],
      imgList: ['imageOne','imageTwo','imageThree','imageFour','imageFive','imageSix'],

      tag:false,

      tagsData: [],
      amount: 0,
      list: []
    }
  },
  components: {
    footView,
    setPara,
    iconDoc
  },
  methods: {
    editActivedEvent ({ row, column }, event) {
      // console.log(`打开 ${column.title} 列编辑`)
    },
    editClosedEvent ({ row, column }, event) {
      let result = row.number
      let r = /^\+?[1-9][0-9]*$/
      if (result != 0) {
        result = result.replace(/\b(0+)/gi,"")
      }
      if (!r.test(result) && result) {
        this.$message.info('数量请输入正整数')
        row.number = 0
        return
      }
      this.amount = 0
      this.tagsData.forEach(e => {
        this.amount += Number(e.number)
      })
    },
    cellClickEvent(a){
      console.log(a)
      let index = a.$rowIndex
      let kindsNumberIngredient = a.data[index].ingredient
      this.washingType = kindsNumberIngredient.washingType
      this.WashingFigure_1 = kindsNumberIngredient.imageOne
      this.WashingFigure_2 = kindsNumberIngredient.imageTwo
      this.WashingFigure_3 = kindsNumberIngredient.imageThree
      this.WashingFigure_4 = kindsNumberIngredient.imageFour
      this.WashingFigure_5 = kindsNumberIngredient.imageFive
      this.WashingFigure_6 = kindsNumberIngredient.imageSix
    },
    closeParameter(){
      this.showParameter = 'none'
    },
    closeIconDoc(){
      this.showIconDoc = 'none'
    },

    // 列印吊牌
    linePrint(){
      for (const i of this.tagsData) {
        i.checkCustomerTag = this.checkCustomerTag
        i.customerNo = this.customerNo
      }
      console.log(this.tagsData)
    },

    // 列印洗标
    washCareLabel(){
      let p = document.getElementById('p')
      p.innerHTML = ''
      this.tagsData.forEach(e => {
        if (Number(e.number)) {
          console.log(e)
          let ingredientHTML = ''
          let imgHTML = ''

          for (const i of this.imgList) {
            console.log(i)
            if (e.ingredient[i]) {
              for (const j of this.iconList) {
                console.log(j)
                if (j.imageNo == e.ingredient[i]) {
                  imgHTML += `
                    <div>
                      <img src="${j.imageUrl}"><p>${j.washInfo}</p>
                    </div>
                  `
                }
              }
            } else {
              break
            }
          }

          for (const i of this.ingredientList) {
            if (e.ingredient[i]) {
              ingredientHTML += `<p>${e.ingredient[i]}</p>`
            } else {
              break
            }
          }
          // console.log(ingredientHTML)

          // getWash()
          for (let i = 0; i < e.number; i++) {
            let item = document.createElement('div')
            item.classList.add('item')
            switch (e.ingredient.washingType) {
              case '皮草':
                item.innerHTML = `
                  <div class="info" style="margin-top:100px;">
                    <p class="big">款号 : ${e.styleNumber}</p>
                    <p class="big">尺码 : ${e.sizeNo.split('-')[1]}  (${this.sizeNumberType == null ? '' : this.sizeNumberType})</p>
                    // <p class="big">检验员 : ${e.supplier}</p>
                    ${ingredientHTML}
                  </div>
                  
                  <div class="img">
                  <p>注意:与其它衣物分开洗涤</p>
                    <p>洗涤说明</p>
                    <div class="xBorder">
                      <div class="border1"></div>
                      ${imgHTML}
                    </div>
                    <p>专业皮草,皮毛护理</p>
                  </div>
                  <div class="btm"> - - - - - - - - - - - - - - - - - - - -</div>
                `
                break;
              case '真丝':
                item.innerHTML = `
                  <div class="info">
                    <p class="big">款号 : ${e.styleNumber}</p>
                    <p class="big">尺码 : ${e.sizeNo.split('-')[1]}  (${this.sizeNumberType == null ? '' : this.sizeNumberType})</p>
                    ${ingredientHTML}
                  </div>
                  
                  <div class="img">
                  <p>注意:与其它衣物分开洗涤</p>
                    <p>洗涤说明</p>
                    <div class="xBorder">
                      <div class="border1"></div>
                      ${imgHTML}
                    </div>
                    <p>请用专业中性的洗涤剂</p>
                  </div>
                  <div class="btm"> - - - - - - - - - - - - - - - - - - - -</div>
                `
                break;
              default:
                item.innerHTML = `
                  <div class="info">
                    <p class="big">款号 : ${e.styleNumber}</p>
                    <p class="big">尺码 : ${e.sizeNo.split('-')[1]}  (${this.sizeNumberType == null ? '' : this.sizeNumberType})</p>
                    ${ingredientHTML}
                  </div>
                  
                  <div class="img">
                    <p>注意:与其它衣物分开洗涤</p>
                    <p>洗涤说明</p>
                    <div class="xBorder">
                      <div class="border1"></div>
                      ${imgHTML}
                    </div>
                  </div>
                  <div class="btm"> - - - - - - - - - - - - - - - - - - - -</div>
                `
                break;
            }
            p.appendChild(item)
          }
        }
      })
      let printHtml = document.getElementById('p').innerHTML
      let wind = window.open("",'newwindow', 'height=500, width=1000, top=100, left=10, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
      wind.document.body.innerHTML = printHtml
      let style = document.createElement('style')
      style.type = 'text/css'
      style.innerHTML = resources.printCSS
      wind.document.head.appendChild(style)
      setTimeout(()=>{wind.print()}, 1000)
    }
  },
  mounted(){
    let _this = this
    document.onkeydown = function(event){
      let e = event || window.event || arguments.callee.caller.arguments[0]
      if(e && e.keyCode == 113){ // 按 F2
        _this.showParameter = 'block'
        event.returnValue = false
        event.cancelBubble = true
        return false
      }
      if(e && e.keyCode == 114){ // 按 F3
        _this.showIconDoc = 'block'
        event.returnValue = false
        event.cancelBubble = true
        return false
      }
    }
  },
  beforeDestroy() {
    this.$root.Bus.$off("send");
  }
}
</script>

<style scoped>
* {
  font-family: 'Source Han Sans CN';
}
  .tags2{
    margin-right: 0.5vw;
    padding: 0 0.5vw;
    background-color: white;
    height: 94.5vh;
    position: relative;
  }

  /* 头部 */
  .topbar{
    white-space: nowrap;
    height: 60px;
    display: flex;
    border-bottom: solid rgb(223, 223, 223) 1.5px;
  }
  .topbar p{
    display: inline-block;
    width: 60px;
    text-align: right;
    line-height: 60px;
    margin-right: 10px;
  }
  .washImg{
    padding-top: 15px;
    margin-right: 20px;
  }
  .washImg input {
    width: 30px;
    height: 30px;
    border: #ccc solid 1px;
    border-radius: 5px;
    margin-right: 10px;
    outline: none;
    padding: 0 5px;
  }
  .washImg input:focus{
    border: 1px solid #017aff;
  }
  .tags2 .sle{
    margin: 20px 30px 0 0;
  }
  .idipt{
    border-radius: 5px;
    border: rgb(224, 224, 224) solid 1px;
    margin-top: 10px;
    height: 40px;
    width: 100px;
  }
  .idipt:focus{
    outline: none;
    border: #017aff solid 1px;
  }

  /* 按钮 */
  .operation{
    padding: 15px 0;
    white-space: nowrap;
  }

  .operation i{
    color: #017aff;
  }
  .operation .annotation{
    display: inline-block;
    position: absolute;
    right: 20px;
  }
  .operation .annotation div{
    border-radius: 30px;
    display: inline-block;
    padding: 5px 10px;
    margin-left: 20px;
    background-color: #f2f2f2;
  }
  .operation .annotation div p{
    display: inline;
    color: #017aff;
  }

  .footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }

  .el-icon-question:before {
    color: #017aff;
    position: relative;
    left: 0px;
    top: 0px;
}

</style>

<style>
.tags2 .topbar .el-input{
    margin: 15px 0 0 0;
    width: 100px;
    height: 30px;
    margin-right: 10px;
  }
  .tags2 .topbar .el-input{
    margin: 15px 16px 0 0;
    width: 160px;
    height: 30px;
  }
  
  .tags2 .topbar .el-input__inner{
    height: 30px;
  }
  .tags2 .el-input__icon{
    line-height: 30px;
  }
  .tags2 .el-select{
    width: 160px;
    margin: 0 16px 0 0;
  }
  .tags2 .operation .el-button{
    margin-right: 15px;
  }
</style>